<template>
	<view>
		<!-- 胶囊 -->
		<view class="top" :style="{height:top+statusBarHeights+'px'}"></view>
		<!-- nav -->
		<view class="nav" :style="{height:Jnheight+'px'}">
			<!-- 图片 --> 
			<view class="title"> 
				
			  <navigator  open-type="navigateBack">
			    <image v-if="navobj.image" src="/static/caret-left.png" mode="aspectFill"></image>
				</navigator>
				<text >{{navobj.title}}</text> 
			</view>
			<text style="width: 33%; "></text> 
			<view style="width: 33%; "></view>
		</view>
		<view class="top" :style="{height:statusBarHeights+'px'}"></view>
	</view>
</template>

<script setup>
	import {storeToRefs} from "pinia";//结构才需要引入
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const { statusBarHeights,top,Jnheight} = storeToRefs(navStore);//解构数据
	
	const goorder = () => {
			uni.reLaunch({
				url:'/pages/home/home?isactive='+2
			})
			
	} 

	/**
	 * 接受父组件传来的值  
	 * 定义对象类型的属性  
	 */
	const props = defineProps(
	{
		navobj:{
			title:{
					type:String,// 类型为字符串
					// required:true,  // 是否必需传值（若必须传值却没有传，则控制台会给出警告）
					default:'自定义标题'   // 默认值
			},
			image:{
					type:Boolean,  // 类型为数字
			},
		}
	})
		

</script>

<style lang="scss">
	.top{
		 display: flex;align-items: center;justify-content: space-between;background-color: #fff;
	}
	.nav{
		background-color: #fff;width: 750rpx;display: flex;align-items: center;justify-content: space-between;
		.navleft{
			width: 33.33%;padding-left: 30rpx;box-sizing: border-box;display: flex;align-items: center;
			image{
				width: 30rpx;height: 30rpx;
			}
		}
	.title{
		width: 33.33%;padding-left: 40rpx;box-sizing: border-box;
		font-size: 32rpx;color: #3d3d3d;font-weight: 700;display: flex;align-items: center;
		image{
			width: 30rpx;height: 30rpx;margin-right: 20rpx;
		}
	}
}
</style>
